<template>
  <div class="register-verify-bg">
    <div class="register-verify-container">
      <h2>用户注册</h2>
      <form @submit.prevent="handleNext">
        <div class="form-group">
          <label for="email">邮箱</label>
          <div class="input-group">
            <input v-model="email" id="email" type="email" placeholder="请输入邮箱" required />
            <button type="button" @click="sendEmail" :disabled="sending || !isValidEmail" class="send-btn">
              {{ sending ? '发送中...' : '发送' }}
            </button>
          </div>
        </div>
        <div class="form-group" v-show="emailSent">
          <label for="activeCode">激活码</label>
          <input v-model="activeCode" id="activeCode" type="text" placeholder="请输入邮箱收到的激活码" required />
        </div>
        <button v-show="emailSent" type="submit" :disabled="verifying" class="next-btn">
          {{ verifying ? '验证中...' : '下一步' }}
        </button>
        <div v-if="error" class="error">{{ error }}</div>
        <div v-if="success" class="success">{{ success }}</div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'

export default {
  name: 'RegisterVerify',
  data() {
    return {
      email: '',
      activeCode: '',
      emailSent: false,
      sending: false,
      verifying: false,
      error: '',
      success: ''
    }
  },
  computed: {
    isValidEmail() {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)
    }
  },
  methods: {
    async sendEmail() {
      this.sending = true
      this.error = ''
      this.success = ''
      
      try {
        // 调用后端发送邮件接口
        await axios.post('/auth/sendEmail', { email: this.email })
        this.sending = false
        this.emailSent = true
        this.success = '邮件已发送，请查收'
        
        // 3秒后清除成功消息
        setTimeout(() => {
          this.success = ''
        }, 3000)
      } catch (err) {
        this.sending = false
        this.error = err.response?.data?.message || '发送失败，请稍后重试'
      }
    },
    async handleNext() {
      this.verifying = true
      this.error = ''
      
      try {
        // 调用后端验证激活码接口
        const res = await axios.post('/auth/vetifyCode', {
          email: this.email,
          activeCode: this.activeCode
        })
        
        this.verifying = false
        
        // 检查返回的状态码
        if (res.data.code === 200) {
          // 验证成功，获取注册令牌
          const registerToken = res.data.data
          
          // 使用localStorage临时存储registerToken
          localStorage.setItem('tempRegisterToken', registerToken);
          
          // 跳转到注册页面，并传递邮箱作为查询参数
          this.$router.push(`/register?email=${encodeURIComponent(this.email)}`)
        } else if (res.data.code === 500) {
          // 显示错误信息
          this.error = res.data.msg || '验证失败'
        } else {
          this.error = '未知错误'
        }
      } catch (err) {
        this.verifying = false
        this.error = err.response?.data?.message || '验证失败，请检查激活码是否正确'
      }
    }
  }
}
</script>

<style scoped>
.register-verify-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.register-verify-container {
  width: 100%;
  max-width: 400px;
  padding: 40px 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.register-verify-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.form-group {
  margin-bottom: 25px;
  width: 100%;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.input-group {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 14px 15px;
  border: 2px solid #e1e5ee;
  border-radius: 10px;
  font-size: 16px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.send-btn, .next-btn {
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.next-btn {
  width: 100%;
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(67, 206, 162, 0.3);
}

.next-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(67, 206, 162, 0.4);
}

.next-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.error {
  color: #f56c6c;
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  border-radius: 5px;
  background: #fef0f0;
}

.success {
  color: #67c23a;
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  border-radius: 5px;
  background: #f0f9ec;
}
</style>